<style lang="scss">
// @import '@/assets/css/variable'; 003792 01617a
.member{
	background-image: linear-gradient(to bottom, #003792 , #01617a);
	padding-bottom: 40px;
	// position: relative;
	$editWidth: 1.8rem;
	.editBox{
		width: $editWidth; height: $editWidth; position: absolute;top: 12px; right: 12px;
		img{
			width: $editWidth;
		}
	}
	.headBox{
		margin-top: 30px;
	}
	.gridBox{
		margin-top: 20px;
		box-shadow: 0px 3px 7px 0px rgba(59, 115, 246, 0.35);
		border-radius: 10px;
		min-height: 80px;
	}
	.btnBox{
		margin-top: 60px;
	}
	.van-popup{
		background-color: #1093c1;
	}
	.van-cell{
		color: white !important;
		background: inherit !important;
	}
	.van-field__label{
		color: white !important;
	}
	.van-field__control{
		color: white !important;
	}
}
</style>

<template>
  <div class="member wrapperContent padding-lr-m" v-if="member">
	  <!-- <div class="editBox" @click="toEditView('/member/editUserInfo')">
		  <img src="../../assets/img/my/edit.png" >
	  </div> -->
    <div class="headBox flex flex-column align-center color-white">
		<div style="flex: 0 0 74px;width: 74px; height: 74px;border-radius: 37px; overflow: hidden;border: 3px solid white; position: relative;">
			<img class="" style="width: 74px; height: 74px;" :src="member.member_avatar||'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-6d661f87-a469-422e-8a84-647406dc2c7f/b4deb6a8-6a4b-408e-a3af-8907ac8a4f86.png'">
		</div>
		<div class="mar-t-10" :style="{fontSize:fontSize==1?'18px':'22px'}">{{member.member_mobile}}</div>
	</div>
	<!-- bac-color-fff -->
	<div class="gridBox bac-color-fff border-radius-l over-hid">
		<van-grid :border="false" :column-num="3" class="margT-l">
		  <van-grid-item to="/matchResult">
		    <van-image width="30" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-767674fd-0f0e-4801-90e6-bef27c2e36df/c2ed0ef7-a94e-49af-8e86-8fe66edc8d9a.png"/>
		    <div class="fc-666 mar-t-10" :style="{fontSize:fontSize==1?'14px':'18px'}">匹配信息</div>
		  </van-grid-item>
		  <van-grid-item to="/applyResult">
		    <van-image width="30" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-767674fd-0f0e-4801-90e6-bef27c2e36df/c850c04a-944a-4f8a-8608-2d250a39452d.png"/>
		    <div class="fc-666 mar-t-10" :style="{fontSize:fontSize==1?'14px':'18px'}">我的申请</div>
		  </van-grid-item>
		  <van-grid-item to="/collect">
		    <van-image width="30" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-767674fd-0f0e-4801-90e6-bef27c2e36df/550dcd82-08c7-41a5-a48e-a1d33f1c23da.png"/>
		    <div class="fc-666 mar-t-10" :style="{fontSize:fontSize==1?'14px':'18px'}">我的收藏</div>
		  </van-grid-item>
		</van-grid>
	</div>
	<div class="mar-t-20">
		<cell-item :item="{icon:'userInfo',label:'个人信息',path:'/member/editUserInfo'}"></cell-item>
		<!-- <cell-item :item="{icon:'info',label:'企业项目信息',path:'/index'}"></cell-item> -->
		<cell-item :item="{icon:'message',label:'常见问答',path:'/member/question'}"></cell-item>
		<cell-item :item="{icon:'help',label:'帮助与反馈',path:'/member/feedback'}"></cell-item>
		<cell-item :item="{icon:'set',label:'设置',path:'/member/set'}"></cell-item>
	</div>
	<div class="btnBox text-center">
		<img src="../../assets/img/my/logout.png" style="width: 223px;" @click="outLogin">
	</div>
	<van-popup v-model="showSetPassword" round class="code_popup" :style="{ width: '80%' }"
	:close-on-click-overlay="false" :close-on-popstate="true" closeable close-icon="close">
		<div class="flex align-center justify-around fc-fff fs-15" style="margin: 16px;">
			设置密码
		</div>
	  <div style="padding: 0px 10px 0px 4px;">
	    <van-form @submit="submit" label-width="72px">
			<van-field
			    v-model="setPasswordForm.password"
			    type="text"
			    name="password"
			    label="请输入密码"
			    placeholder="请输入密码"
			/>
	      <van-field
	          v-model="setPasswordForm.code"
	          type="text"
	          name="code"
	          label="验证码"
	          placeholder="验证码"
	      >
			<template #button>
				<van-button size="small" color="linear-gradient(to left, #F1D331 , #FC9600)" @click="downEvent">{{(downTime>0&&downTime<60)?`${downTime}秒后可重发`:'获取验证码'}}</van-button>
			</template>
		  </van-field>
	      <div style="margin: 16px;padding-top: 10px;">
	        <van-button round block color="#017494" native-type="submit" loading-text="提交中...">提交</van-button>
	      </div>
		  <div class="flex align-center justify-between" style="margin: 16px;">
			<div @click="clickCheck">
				<van-checkbox v-model="isCheck"><span class="fc-fff text-underline">今日不再弹出</span></van-checkbox>
			</div>
			<div class="text-underline fc-fff" @click="closePop">暂不设置</div>
		  </div>
	    </van-form>
	  </div>
	</van-popup>
	<van-popup v-model="showValidatePasswordPop" round class="code_popup" :style="{ width: '80%' }"
	:close-on-click-overlay="false" :close-on-popstate="true" closeable close-icon="close">
	<div class="flex align-center justify-around fc-fff fs-15" style="margin: 16px;">
		校验密码
	</div>
	  <div style="padding: 0px 10px 0px 4px;">
	    <van-form @submit="submit" label-width="72px">
			<van-field
			    v-model="setPasswordForm.password"
			    type="text"
			    name="password"
			    label="请输入密码"
			    placeholder="请输入密码"
			/>
	      <div style="margin: 16px;padding-top: 10px;">
	        <van-button round block color="#017494" native-type="submit" loading-text="提交中...">提交</van-button>
	      </div>
		</van-form>
	  </div>
	</van-popup>
  </div>
</template>
<script>
	import cellItem from '@/components/cell/cellItem.vue'
	import { mapGetters, mapActions } from "vuex";
	import {Toast} from 'vant'
export default {
	name:'member',
  components: {cellItem},
  data() {
    return {
		showSetPassword:false,//设置密码
		setPasswordForm:{
			password:'',
			code:''
		},
		downTime:60,
		t:'',
		isCheck:false,
		todaySet:{
			createTime:'',
			isCheck:''
		},
		showValidatePasswordPop:false,//校验密码
		userInfo:'',
		fontSize:localStorage.getItem('fontSize') || 1
    };
  },
  computed: {
    ...mapGetters(['member']),
  },
  created() {
	  
  },
  beforeDestroy() {
    if (this.t) {
      clearInterval(this.t);
    }
  },
  mounted() {
	  // 不同情况刷新页面 让tabbar正常停留在之前的页面
	let params = window.location.hash;
	let hash = params.substr(2);
	console.log('hash',hash)
	this.bus.$emit('refreshTabbar',hash)
	// 若没设置密码，今日是否弹出设置密码框
	// let lastCheck = JSON.parse(localStorage.getItem('todaySet'))
	// let lastCheckDate = lastCheck.createTime
	// if(lastCheckDate==this.$utils.parseToDateYMD(new Date())){
	// 	this.showSetPassword = false
	// }
	this.GET_Member({})
  },
  methods:{
	  ...mapActions(['GET_Member']),
	  waiting() {
		  Toast('待开发')
	  },
	  //图片上传
	  afterRead(file) {
	    // 此时可以自行将文件上传至服务器
	    console.log(file);
	    let formData = new FormData(); //构造一个 FormData，把后台需要发送的参数添加
	    formData.append('file', file.file); //接口需要传的参数
	    console.log(formData);
	    this.$request.upImg(formData).then(res => {//将formDate文件上传到阿里云服务器，会返回图片地址
		  console.log('res',res)
	      if(res.code == 200){
			  const allPath = res.data.allPath
			  
	        // 调用修改个人信息的接口
			const params = {
				id:this.member.id,
				member_avatar:allPath
			}
			this.$request.saveMemberAvatar(params).then(res => {//将formDate文件上传到阿里云服务器，会返回图片地址
			  console.log('res',res)
			  if(res.code == 200){
				this.GET_Member({})
			  }else{
			    Dialog({ title:'温馨提示', message: res.msg, closeOnClickOverlay:true });
			  }
			});
	      }else{
	        Dialog({ title:'温馨提示', message: res.msg, closeOnClickOverlay:true });
	      }
	      // this.uploader_loading = false;
	  
	    });
	  },
	  changeInputImg(e) {
		  console.log('e',e)
	  },
	  outLogin() {
		  this.$request.outLogin().then(res=>{
			  console.log('res_outLogin',res)
			  // localStorage.setItem('openid','')
			  // localStorage.clear()
			  localStorage.removeItem(process.env.VUE_APP_TOKEN_NAME)
			  localStorage.removeItem('member')
			  // this.$router.replace('/login')
			  const href = location.href
			  console.log('href',location.href)
			  const domain = href.split('#')[0]
			  console.log('domain',domain)
			  location.href = domain
		  })
	  },
	  toEditView(path) {
	  	this.$router.push(path)
	  },
	  closePop() {
		  if(this.isCheck){
			  this.todaySet.createTime = this.$utils.parseToDateYMD(new Date())
			  this.todaySet.isCheck = this.isCheck
			  console.log('this.todaySet',this.todaySet)
			  localStorage.setItem('todaySet',JSON.stringify(this.todaySet))
		  }
		  this.showSetPassword=false
	  },
	  clickCheck() {
		  this.isCheck = !this.isCheck
		  console.log("this.isCheck",this.isCheck)
	  },
	downEvent() {
	  this.t = setInterval(()=>{
		  this.downTime--
		  if(this.downTime<=0){
			  this.downTime = 60
			  clearInterval(this.t)
		  }
	  },1000)
	},
    submit(){
		
	}
  }
}

</script>